import React, { useEffect, useState } from 'react';
import { Form, Button, Input, Col, Avatar, message, Select } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import './Mydata.scss'
import { getupdateData, getData } from '../../../api/Workbench'
import { role_select } from '../../../api/Login'
import { useNavigate } from 'react-router-dom';
interface Props {

}

function Mydata(props: Props) {
    var [rolelist, setRolelist] = useState([])
    var [sexlist, setSexlist] = useState([])
    var [id, setId] = useState('')
    var navigate = useNavigate()

    const { TextArea } = Input;
    // 调用Form的钩子函数useForm()
    const [form] = Form.useForm()
    const [messageApi, contextHolder] = message.useMessage()

    // 初始化阶段
    useEffect(() => {
        //角色渲染
        role_select().then((res: any) => {
            // console.log(res,'34');
            var rolelist = res.data.data.map(((item: any) => {
                return { value: item.roleId, label: item.roleName }
            }))
            setRolelist(rolelist)
        })
        //获取用户信息
        getData({ doctorId: localStorage.getItem('doctorId') }).then((res: any) => {
            // console.log(res);
            // console.log(res.data.data[0]);
            form.setFieldsValue(res.data.data[0])
        })

    }, [])
    // 提交表单
    const onFinish = async (values: any) => {
        console.log('39', values);
        var res = await getupdateData({ doctorId: localStorage.getItem('doctorId'), doctorTel: values.doctorTel, doctorImg: values.doctorImg, doctorName: values.doctorName, roleId: values.roleId, doctorSex: values.doctorSex, doctorIntroduce: values.doctorIntroduce, doctorGoodat: values.doctorGoodat })
        // console.log(res,'41');
        if (res.data.code == 200) {
            messageApi.open({
                type: 'success',
                content: '保存成功',
            });
            navigate('/index/work')
        }
    };
    // 提交失败
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    const handleChange = (val: any) => {
        // console.log(v);
        setId(val)
    }
    return (
        <div className='mydata'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>个人资料</h3>
            </div>
            <h4>医生信息</h4>
            <Form
                form={form}
                layout="inline"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Col span={8}>
                    <Form.Item
                        label="医生编号"
                        name="doctorId"
                    >
                        <Input disabled />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="用户名"
                        name="doctorTel"
                        rules={[{ message: '请填写您的用户名！' }]}
                    >
                        <Input disabled />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="医生头像"
                        name="doctorImg"
                        rules={[{ message: '请选择您的头像' }]}
                    >
                        <div className="avatorbox">
                            <Avatar icon={<UserOutlined />} />
                            <a >+点击上传</a>
                        </div>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="医生姓名"
                        name="doctorName"
                        rules={[{ message: '请填写您的姓名！' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="医生角色"
                        name="roleId"
                    // rules={[{ message: '请选择您的角色' }]}
                    >
                        <Select
                            value={id}
                            onChange={(val) => { handleChange(val) }}
                            allowClear
                            options={rolelist}
                        ></Select>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="性别"
                        name="doctorSex"
                        rules={[{ message: '请选择您的性别！' }]}
                    >
                        <Select
                            options={[
                                { value: '男', label: '男' },
                                { value: '女', label: '女' },
                            ]}
                        ></Select>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="医生简介"
                        name="doctorIntroduce"
                        rules={[{ message: '请填写您的简介' }]}
                    >
                        <TextArea rows={4} />
                    </Form.Item>
                </Col>
                <Col span={16}></Col>
                <Col span={8}>
                    <Form.Item
                        label="医生擅长"
                        name="doctorGoodat"
                        rules={[{ message: '请填写您所擅长的部分！' }]}
                    >
                        <TextArea rows={4} />
                    </Form.Item>
                </Col>
                <Col span={16}></Col>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType='submit'>
                        保存
                    </Button>
                </Form.Item>
            </Form>
            {contextHolder}
        </div>
    );
}

export default Mydata;